<!--
	全国承灾体易损性数据
	Created by Penglei on 2023/08/10
-->
<template>
    <div class="app-container">
        <!-- 公共顶部 -->
        <large-screen-header :back="true" to="/vulnerability/subpage1" />
        <!-- 主体部分 -->
        <div class="app-main">
            <!-- 中心部分 -->
            <div class="app-center">
                <!-- 标题 -->
                <headline name="全国承灾体易损性数据" />
                <!-- 视频 -->
                <div class="app-video">
                    <video ref="videoRef" width="1280" height="630" controls="controls" autoplay="autoplay" muted="muted" loop="loop" preload="auto"
                        :poster="objVideo.imgUrl" @timeupdate="onTimeUpdate">
                        <template v-if="objVideo.url">
                            <source :src="objVideo.url" type="video/mp4">
                            <source :src="objVideo.url" type="video/webm">
                            <source :src="objVideo.url" type="video/ogg">
                            <!-- 兼容处理 -->
                            <object :data="objVideo.url" width="1280" height="630">
                                <embed :src="objVideo.url" width="1280" height="630" />
                            </object>
                        </template>
                    </video>
                </div>
                <div class="acceleration-chart">
                    <GroundMotion ref="groundMotionRef" :paramId="paramId" :percentage="percentage"></GroundMotion>
                </div>
            </div>
            <!-- 右侧 -->
            <div class="app-right">
                <div class="app-right-item">
                    <subheadings name="基本信息" />
                    <BaseInformation ref="baseInformationRef" @change="onChange"></BaseInformation>
                </div>
                <div class="app-right-item">
                    <subheadings name="概率地震需求分析" />
                    <SeismicVulnerabilityAnalysis ref="seismicVulnerabilityAnalysisRef" :paramList1="paramList1"></SeismicVulnerabilityAnalysis>
                </div>
                <div class="app-right-item">
                    <subheadings name="概率地震易损性分析" />
                    <FragilityCurve ref="fragilityCurvenRef" :paramList2="paramList2"></FragilityCurve>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="VulnerabilitySubpage2">
import { getCurrentInstance, onMounted, ref, watch } from 'vue';
// 基本信息
import BaseInformation from './components/BaseInformation';
// 概率地震需求分析
import SeismicVulnerabilityAnalysis from './components/SeismicVulnerabilityAnalysis';
// 概率地震易损性分析
import FragilityCurve from './components/FragilityCurve1';
// 地震动
import GroundMotion from './components/GroundMotion';
// 视频默认图片
import imgVideo from '@/views/vulnerability/images/video.png';

// 当前实例
const { proxy } = getCurrentInstance();
// 接口跟路径
const baseUrl = import.meta.env.VITE_APP_BASE_API;
// 参数id
let paramId = ref('');
let paramList1 = ref([]);
let paramList2 = ref([]);

// 视频播放标签
let videoRef = ref();
// 视频播放百分比
let percentage = ref(0);
// 视频
const objVideo = ref({
    url: '',
    imgUrl: imgVideo,
})
// 视频播放时间改变
const onTimeUpdate = (e) => {
    if (e?.target) {
        const {
            // 当前播放时长
            currentTime,
            // 视频总时长
            duration,
        } = e.target;
        // 视频播放百分比
        percentage.value = Number((currentTime / duration).toFixed(2));
    }
}

// 基础信息修改
const onChange = (val) => {
    paramId.value = val;
    paramList1.value = val.list1
    paramList2.value = val.list2
}
// 监听参数id改变
watch(() => paramId.value, (val) => {
    // console.log(val);
    objVideo.value.url = baseUrl + '/czt/video?id=' + paramId.value;
}, {
    // 深层嵌套
    deep: true,
    // 初始触发
    // immediate: true
})
</script>

<style scoped lang="scss">
.app-container {
    min-height: 1080px;
}

.app-main {
    .app-center {
        width: 100%;

        .app-video {
            text-align: center;
        }

        .acceleration-chart {
            width: 1284px;
            margin: 0 auto;
            height: 240px;
        }
    }

    // 右侧
    .app-right-item {
        height: 300px;
    }
}
</style>